<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: mediumslateblue;
        color: #dfdfdf;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title }}</h2>
      <h2>msg == {{msg }}</h2>
      <m-head></m-head>
      <parent></parent>
    </div>
    <template id="parent">
      <div>
        <h2>parent - parent - 1</h2>
        <hr />
        <childone :num="num" ref="one"></childone>
        <hr />
        <childtwo
          @changenum="setNum"
          :changenum="setNum"
          @changeoneshow="changeshow"
          :changeshow="changeshow"
        ></childtwo>
      </div>
    </template>
    <template id="childone">
      <div>
        <h2>childone - childone - 1</h2>
        <h2>count === {{count}}</h2>
        <h2>word --- {{word}}</h2>
        <h2>props - num ={{num}}</h2>
        <p class="box" v-show="show">我是被子组件 two 控制的</p>
      </div>
    </template>
    <template id="childtwo">
      <div>
        <h2>childtwo - childtwo -2</h2>
        <button @click="changeonecount">点击修改 one的count</button>
        <p>
          <input type="text" @inout="changeword" placeholder="修改one-word" />
        </p>
        <button @click="changebyparent">点击修改 num</button>
        <button @click="change">自定义事件 点击修改 num</button>
        <button @click="changepnum(88)">反向props 去修改 num</button>
        <hr />
        <button @click="changeshow1">parent 点击修改 show</button>
        <button @click="changeshow2">自定义 点击修改 show</button>
        <button @click="changeshow">反向props 点击修改 show</button>
      </div>
    </template>
    <script>
      //全局注册
      const bus = new Vue(); //$emit $on $once
      Vue.component("mHead", {
        template: "<header>Head - Head - wh2116 daydyaup </header>",
      });
      Vue.component("parent", {
        template: "#parent",
        data() {
          return {
            num: 2116,
          };
        },
        methods: {
          setNum(n) {
            this.num += n;
          },
          changeshow() {
            this.$refs.one.show = !this.$refs.one.show;
          },
        },
      });
      Vue.component("childone", {
        template: "#childone",
        data() {
          return {
            count: 1000,
            word: "Vue is very hard",
            show: true,
          };
        },
        props: ["num"],
        mounted() {
          bus.$on("changeonecount", (n) => {
            this.count += n;
          });
          bus.$on("changeword", (word) => {
            this.word = word;
          });
        },
      });
      Vue.component("childtwo", {
        template: "#childtwo",
        props: ["changepnum", "changeshow"],
        methods: {
          changeonecount() {
            bus.$emit("changeonecount", 100);
          },
          changeword(e) {
            bus.$emit("changeword", e.target.value);
          },
          changebyparent() {
            this.$parent.num++;
          },
          change() {
            this.$emit("changenum", 10);
          },
          changeshow1() {
            this.$parent.$refs.one.show = !this.$parent.$refs.one.show;
          },
          changeshow2() {
            this.$emit("changeoneshow");
          },
        },
      });
      const vm = new Vue({
        components: {},
        data: {
          title: " Vue 组件通信 (兄弟组件通信)",
          msg: "小型、独立和通常可复用的组件构建大型应用",
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
  </body>
</html>
